<template>
	<section>
		<el-card shadow="never">
			<div slot="header">
				个人设置
			</div>
			<div class="columns">
				<div class="column is-full">
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<!-- Tab Pane 1: 基础信息 -->
						<el-tab-pane label="基础信息" name="first">
							<!-- Form 1: 账号 | 昵称 | 个人简介 -->
							<el-form ref="basicForm" :model="user" :label-position="labelPosition" label-width="100px">
								<!-- 账号 -->
								<el-form-item label="账号">
									<el-input v-model="user.username" disabled />
								</el-form-item>
								<!-- 昵称 -->
								<el-form-item label="昵称" prop="nickname">
									<el-input v-model="user.nickname" />
								</el-form-item>
								<!-- 个人简介 -->
								<el-form-item label="个人简介" prop="intro">
									<el-input v-model.lazy="user.intro" />
								</el-form-item>
								<!-- 提交 & 重置按钮 -->
								<el-form-item>
									<el-button type="primary" @click="submitForm('basicForm')">提交</el-button>
									<el-button @click="resetForm('basicForm')">重置</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>

						<!-- Tab Pane 2: 头像 -->
						<el-tab-pane label="头像" name="second">
							<figure class="image is-48x48">
								<img :src="`https://cn.gravatar.com/avatar/${this.user.id}?s=164&d=monsterid`">
							</figure>
						</el-tab-pane>

						<!-- Tab Pane 3: 电子邮箱 -->
						<el-tab-pane label="电子邮箱" name="third">
							<!-- Form 2: 电子邮箱 -->
							<el-form ref="emailForm" :model="user" :rules="rules" label-width="100px" class="demo-dynamic">
								<el-form-item label="邮箱" prop="email" >
									<el-input v-model="user.email" />
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm('emailForm')">提交</el-button>
									<el-button @click="resetForm('emailForm')">重置</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>

						<!-- Tab Pane 4: 手机号 -->
						<el-tab-pane label="手机号" name="fourth">
							<!-- Form 3: 手机号 -->
							<el-form ref="phoneForm" :model="user" label-width="100px" class="demo-dynamic">
								<el-form-item label="手机号" prop="phone">
									<el-input v-model="user.phone" />
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm('phoneForm')">提交</el-button>
									<el-button @click="resetForm('phoneForm')">重置</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>

					</el-tabs>
				</div>
			</div>
		</el-card>
	</section>
</template>

<script>
import { fetchUserProfile , updateUser} from '@/api/user'

export default {
  	name: 'Setting',

	data() {
		// 校验手机号规则
		const checkPhone = (rule, value, callback) => {
			// 定义校验手机号的正则表达式
			const phoneRege = /^1[23456789][0-9]{9}$/
			
			// 若验证通过
			if (phoneRege.test(value)) return callback()
			// 若验证不通过
			callback(new Error('请填写正确的手机号'))
		}

		return {
			activeName: 'first',

			labelPosition: 'right',

			user: {
				id: '',
				username: '',
				nickname: '',
				introl: '',
				email: '',
				phone: '',
				avatarPath: ''
			},

			rules: {
				email: [ 
					{required: true, message: '请输入邮箱地址', trigger: 'blur' },
				  	{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
				],
				phone: [
					{ required: true, message: "请输入手机号", trigger: "blur" },
					{ min: 3, max: 30, message: "长度在 3 到 30 个字符", trigger: "blur" },
					{ validator: checkPhone, trigger: "blur" }
				]
			}
		}
	},

	created() {
		this.getUserProfile()
	},

	methods: {
		// 获取用户信息
		getUserProfile() {
			fetchUserProfile(this.$route.params.username).then(response => {
				const { data } = response
				this.user = data
			})
		},
		
		// 切换 Tab
		handleClick(tab, event) {
			console.log(tab, event)
		},

		// 提交修改信息
		submitForm(formName) {
			updateUser(this.user).then(response => {
				this.$message.success('信息修改成功')
				this.getUserProfile()
			})
		},

		resetForm(formName) {
			console.log('------ reset button being clicked -------')
			this.$refs[formName].resetFields()
		}
	}
}
</script>

<style scoped>

</style>
